<template>
    <div >

        <div class="user-list unified-bg-white unifined-border-radius">

            <div class="box-head flex unified-flex-space-between ">

                <span class="box-head-title">Goods List</span>

                <div class="user-list-head-search-box flex ">
                    <div class="user-list-head-search">
                        <input type="" name="" id="" value="" class="user-list-head-search-input" />
                        <span class="user-list-head-search-btn el-icon-search" ></span>
                    </div>

                    <!-- 添加按钮 -->
                    <span class="user-list-head-action-btn el-icon-circle-plus-outline" @click="add"></span>
                    <!-- 全选/反选 -->
                    <el-dropdown>
                        <span class="user-list-head-action-btn el-icon-more"></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>全选</el-dropdown-item>
                            <el-dropdown-item>反选</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <div class="unified-table-padding " v-loading="pageLoading">

                <div class="el-form">
                    <el-table :data="list"  highlight-current-row>
                        
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        
                        <el-table-column type="expand">
                            <template slot-scope="data">
                                <goods-open :data="data.row"></goods-open>
                            </template>
                        </el-table-column>


                        <!-- <el-table-column prop="type" label="分类" width="80">
						<template slot="header">
							<div class="tableHeader">
								<span>Type</span>
							</div>
						</template>

						<template slot-scope="data">
							<div class="tableHeader">
								<el-link type="primary">{{data.row.type}}</el-link>
							</div>
						</template>

					</el-table-column> -->

                        <el-table-column prop="title" label="Title">
                        </el-table-column>



                        <el-table-column prop="price" label="Price" width="120">
                            <template slot="header">
                                <div class="tableHeader">
                                    <span>Price</span>
                                </div>
                            </template>

                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <span class="unified-price">{{data.row.price}}</span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="stock" label="库存" width="120">

                            <template slot="header">
                                <div class="tableHeader">
                                    <span>库存</span>
                                </div>
                            </template>

                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <span class="unified-price">{{data.row.stock || '库存缺货'}}</span>
                                </div>
                            </template>

                        </el-table-column>

                        <el-table-column prop="review" label="Review" width="140">
                            <template slot="header">
                                <div class="tableHeader">
                                    <span>官方测评</span>
                                </div>
                            </template>

                            <template slot-scope="data">
                                <div class="tableHeader flex unified-flex-space-between unified-flex-align">
                                    <i class="el-icon-info" v-if="data.row.review"></i>
                                    <i class="el-icon-warning unified-color-red" v-if="!data.row.review"></i>

                                    <el-button v-if="data.row.review" type="success" size="mini"
                                        @click="clickEditGoods(scope.$index)">
                                        <i class="el-icon-video-camera-solid"></i>查看测评
                                    </el-button>

                                    <el-button v-else type="warning" size="mini" @click="clickEditGoods(scope.$index)">
                                        <i class="el-icon-circle-plus-outline"></i>添加测评
                                    </el-button>
                                </div>
                            </template>

                        </el-table-column>


                        <el-table-column prop="addTime" label="addTime" width="120">

                            <template slot="header">
                                <div class="tableHeader">
                                    <span>addTime</span>
                                </div>
                            </template>

                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <span class="unified-price">{{data.row.addTime | turnTime}}</span>
                                </div>
                            </template>

                        </el-table-column>

                        <el-table-column prop="status" label="Status" width="80">
                            <template slot="header">
                                <div class="tableHeader">
                                    <span>Status</span>
                                </div>
                            </template>
                            <template slot-scope="data">
                                <div class="tableHeader">
                                    <span>
                                        <el-tag effect="plain" size="small" :type="data.row.status?'':'danger'">
                                            {{ data.row.status?'正常':'关闭'}}
                                        </el-tag>
                                    </span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="address" label="操作" width="140">

                            <template slot="header">
                                <div class="tableHeader">
                                    <span>操作</span>
                                </div>
                            </template>

                            <template slot-scope="scope">
                                <div class="tableHeader flex unified-flex-space-between unified-flex-align">
                                    <el-button type="primary" size="mini" @click="clickEditGoods(scope.$index)">编辑
                                    </el-button>

                                    <el-button slot="reference" type="danger" size="mini" @click="remove(scope.$index)">删除</el-button>

                                </div>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
                
                <!-- 商品列表 -->
                <div class="unified-pagination unified-bg-white">
                    <el-pagination :page-sizes="[10]" :page-size="10" :current-page="page" @current-change="ChangePage"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
                
        </div>
        

    </div>
</template>

<script>
    import GoodsOpen from '../../components/goods-open/goods-open.vue'

    // 引入Mixin
    import Mixin from '../../mixin/list.js'
    export default {
        mixins: [Mixin],
        components: {
            // heade,
            'goods-open': GoodsOpen
        },
        data() {
            return {
                api: this.$api.goods,
                tabIndex: "1",
                // 表格加载状态
                tableloading: true,
                // 搜索框内容
                searchValue: "",
            }
        },
        methods: {
            // Tab标签被单机
            handleTabClick() {
                this.setPageLoading(true)
                // this.tabIndex = tab
            },
            // 点击删除商品
            remove(index) {
                
                this.$confirm('此操作将永久删除该商品的所有信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.setPageLoading(true)
                    this.removeGoods(this.list[index]._id, index)
                })
                
                
            },
            // 点击编辑商品
            clickEditGoods(index) {
                console.log('点击了编辑商品', index);
            },
            // 点击添加商品
            add() {
                this.$router.push("/Home/add/goods")
            },
            // 当前页变更
            ChangePage(page) {
                this.page = page
                this.setPageLoading(true)
                this.getData()
            },
            // 向服务器获取数据
            getData() {
                this.$axios({
                    url: this.$api.goods,
                    method: "GET",
                    params: {
                        "action": "list",
                        "params": {
                            page: this.page,
                            total: this.total
                        }
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.list = res.data.data
                        this.page = res.data.page
                        this.pages = res.data.pages
                        this.total = res.data.total
                        this.setPageLoading(false)
                    } else {
                        this.$message.error(res.data.code)
                    }
                })
            },
            removeGoods(id, index) {
                this.$axios({
                    url: this.api,
                    method: "delete",
                    params: {
                        "action": "remove",
                        "params": {
                            id
                        }
                    }
                }).then(res => {
                    if (res.data.code) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.removelistData(index)
                    }
                    this.setPageLoading(false)
                })
            }

            // 点击导入

            // 点击导出

            // 点击刷新
        },
        created() {
            this.getData()
        }
    }
</script>

<style scoped="scoped">
    .lookPage {}


    .form {
        width: 100%;
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
    }

    .el-form {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .operation {
        width: 130px;
        height: 80%;
        display: flex;
        flex-direction: column;
    }

    .operation-item {
        height: 50%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>
